<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="courseContent">
        <!-- 顶部 -->
        <div style="font-size: 14px">
          <div style="color: #ee3322; font-size: 14px">{{class2.className}}</div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 25px;
              margin-bottom: 10px;
            "
          >
            <div style="font-size: 14px">
              本班共 <span style="color: #ee3322">{{list.length}}</span> 人
            </div>
            <div style="color: #ffa63d; font-size: 14px">班级码：{{class2.classNumber}}</div>
          </div>
          <table
            style="
              width: 100%;
              max-width: 100%;
              border: 1px solid #ddd;
              background-color: transparent;
              border-collapse: collapse;
              border-spacing: 0;
              table-layout: fixed;
            "
          >
            <tbody>
              <tr style="background-color: #8e8e8e; color: white">
                <td>学号</td>
                <td>姓名</td>
                <td>电话号码</td>
              </tr>
              <tr v-for="(item,index) in list" :key="index">
                <td>{{item.id}}</td>
                <td style="color: #0088ff;">{{item.username}}</td>
                <td>{{item.phone}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from "@/components/HeaderPage.vue";
import {queryClassStudent} from "@/api/class"
export default {
  data() {
    return {
      courseId: "",
      class2:{},
      list:[],
    };
  },
  components: {
    HeaderPage,
  },
  mounted() {
    this.courseId = this.$route.query.courseId;
    this.getStudents();
  },
  methods:{
    // 获取班级学生信息
    getStudents(){
        queryClassStudent(this.courseId).then(res => {
            this.list = res.list;
            this.class2 = res.class;         
        }).catch(()=>{})
    }
  }
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.courseContent {
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}
tr{
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
td{
    padding: 8px;
    word-break: break-all;
    display: table-cell;
    unicode-bidi: isolate;
    border: 1px solid #ddd;
}
</style>
